
<html>

<head>
  <title>World Baking Day</title>
  <link rel="stylesheet" href="static/css/style.css" />
  <link rel="stylesheet" href="static/css/snapshot.css" />
  <link rel="stylesheet" href="static/css/bootstrap/responsive.css" >
  <script src="static/js/LAB.min.js"></script>
    <script>
    $LAB
    .script('//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js')
    .script('static/js/recog.js')
    .script('static/js/carousel.js')
    .script('static/js/bootstrap-alert.js')
    .script('static/js/snapshot.js')
    .script('static/js/timeData.js').wait()
    .script('static/js/zooYouTubePlayer.js').wait()
    .script('static/js/main.js').wait()
    .script('static/js/wbd.js')

  </script>

</head>

<body>

  

  <div id="wrap">
    
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand">World Baking Day</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <!--li class="">
                <a href="./index.html">Home</a>
              </li>
              <li class="active">
                <a href="./getting-started.html">Get started</a>
              </li-->
            </ul>
          </div>
        </div>
      </div>
    </div>



      <!-- Begin page content -->
      <div class="fluid-container" id="main-container">

        <div class="row-fluid alert fade">
          <button type="button" class="close" data-dismiss="alert">×</button>
          <strong>Speech Recognition Result:</strong> <span></span>
        </div>


        <div>

          <div class="row-fluid item active" id="intro">
            <div class="span4 offset1 clear">
              <p class="pull-right"><a class="btn btn-large btn-primary" id="cook-along-btn">Cook Along »</a></p>
              <p><div class="icon-mic"></div> or <div class="icon-keyboard"></div> control</p>
              <p><i class="icon-camera"></i> snap your creation</p>
              <p><i class="icon-twitter"></i> show it to the world</p>
            </div>
            <div class="span5 clear">
              <p><a class="btn btn-large btn-success pull-right" href="#">Just Watch »</a></p>
           </div>
          </div>

          <div class="row-fluid item" id="control">
            <div class="span6 offset3">
              <p>Choose how youd like to control the video playback:</p>
            </div>
            <div class="span4 offset1 clear">
              <p class="pull-right"><a class="btn btn-large btn-primary" id="voice-btn"><i class="icon-mic"></i>Voice</a></p>
            </div>
            <div class="span5 clear">
              <p><a class="btn btn-large btn-success pull-right" id="keyboard-btn"><i class="icon-keyboard"></i>Keyboard</a></p>
           </div>
          </div>


          <div class="row-fluid item max" id="cookalong">
            <div class="span8" id="player-holder">

              <div class="row">
                <div class="span11 offset1"><div id="player"></div></div>
              </div>
              <div class="row">
                <div class="span11 offset1">
                  <!--CONTROLS-->
                </div>
              </div>
              

            </div>

            <div class="span4" >
              <div id="steps">
                <div id="steps-border"></div>
                <p>Steps</p>
                <ul>
                  <li class="step on" data-index="0">
                    <div class="step-icon">1</div>
                    <span>Mix flour, Stork, sugar &amp; eggs</span>
                      <p>Get a bowl and mix 200g of flour, 5kg of Stork, 200g of sugar and 17 eggs.</p>
                      <p>You might need to go buy more Stork.</p>
                  </li>
                  <li class="step off" data-index="1">
                    <div class="step-icon">2</div>
                    <span>Chop and add something</span>
                      <p>Maybe find something choppable.</p>
                      <p>Chop it and chuck it in with the mix.</p>
                  </li>
                  <li class="step off" data-index="2">
                    <div class="step-icon">3</div>
                    <span>Line the tin and bake</span>
                      <p>Grease the tine with some more Stork.</p>
                      <p>Multiple paragraphs of text telling you to beat the eggs or something.</p>
                  </li>
                  <li class="step off" data-index="3">
                    <div class="step-icon">4</div>
                    <span>Decorate your cake</span>
                      <p>Put pretty things on it</p>
                      <p>Maybe add a ribbon</p>
                  </li>
                  <li class="step off" data-index="4">
                    <div class="step-icon">5</div>
                    <span>Upload a photo</span>
                      <p>A CTA to take a photo and tweet the result</p>
                      <div class="btn btn-success span10 breakout-btn" id="snapshot-btn">Take a photo of your creation <i class="icon-camera"></i></div>
                  </li>
                </ul>
              </div>

            </div>

          </div>

          <div class="row-fluid item" id="snapshot">
            <div class="span6 offset3" style="position:relative">
              <div id="photo">

                <video class="video" autoplay></video>
                <img class="photo hide" src="" id="photo-area">
                <canvas style="display:none;" width="640" height="480"></canvas>
                <!--div id="white-fade" class="hide"></div-->
                <div id="share-ui" class="hide">
                  <div id="text"><textarea id="messageText"></textarea></div>
                  <div><button class="btn btn-succes" id="share">Share</button></div>
                </div>
              </div>
              <div class="btn btn-success" id="take-snap">Take Snap!</div>


            </div>

          </div>


        </div>
      </div>

    <div id="push"></div>
  </div>
  
  

  <div id="footer">
    <div class="container">
      <p class="muted credit">Standard footer stuff</p>
    </div>
  </div>
</body>

</html>